<script setup lang="ts">
import { computed, ref } from 'vue'

// 搜索文本
const searchText = ref('')

// 问题分类
const categories = ref([
  { id: 1, name: '账号相关', icon: 'icon-user' },
  { id: 2, name: '借阅规则', icon: 'icon-book' },
  { id: 3, name: '支付问题', icon: 'icon-wallet' },
  { id: 4, name: '其他问题', icon: 'icon-more' },
])

// 常见问题
const faqs = ref([
  {
    id: 1,
    question: '如何注册账号？',
    answer: '点击首页右上角的"注册"按钮，填写手机号码和验证码即可完成注册。',
    isExpanded: false,
  },
  {
    id: 2,
    question: '如何借阅图书？',
    answer: '在图书详情页点击"借阅"按钮，选择借阅时长，确认支付即可完成借阅。',
    isExpanded: false,
  },
  {
    id: 3,
    question: '借阅期限是多久？',
    answer: '普通用户最长可借阅30天，会员用户最长可借阅60天。',
    isExpanded: false,
  },
  {
    id: 4,
    question: '如何续借图书？',
    answer: '在"我的借阅"中找到要续借的图书，点击"续借"按钮即可。',
    isExpanded: false,
  },
  {
    id: 5,
    question: '逾期未还会怎样？',
    answer: '逾期未还将产生滞纳金，并可能影响您的信用记录。',
    isExpanded: false,
  },
])

// 根据搜索文本过滤问题
const filteredFaqs = computed(() => {
  if (!searchText.value) {
    return faqs.value
  }
  return faqs.value.filter(faq =>
    faq.question.includes(searchText.value)
    || faq.answer.includes(searchText.value),
  )
})

// 处理搜索
function handleSearch() {
  // 可以在这里添加搜索逻辑
}

// 选择分类
function selectCategory(category: any) {
  // 可以在这里添加分类筛选逻辑
}

// 展开/收起问题
function toggleFaq(faq: any) {
  faq.isExpanded = !faq.isExpanded
}

// 拨打电话
function makePhoneCall() {
  uni.makePhoneCall({
    phoneNumber: '4001234567',
  })
}

// 复制邮箱
function copyEmail() {
  uni.setClipboardData({
    data: '1175465937@qq.com',
    success: () => {
      uni.showToast({
        title: '邮箱已复制',
        icon: 'success',
      })
    },
  })
}

// 打开微信
function openWechat() {
  // 这里可以显示微信二维码
  uni.showModal({
    title: '微信客服',
    content: '请使用微信扫描二维码添加客服',
    showCancel: false,
  })
}
</script>

<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <text class="iconfont icon-search" />
      <input
        v-model="searchText"
        class="search-input"
        type="text"
        placeholder="搜索问题"
        @input="handleSearch"
      >
    </view>

    <!-- 问题分类 -->
    <view class="category-list">
      <view
        v-for="category in categories"
        :key="category.id"
        class="category-item"
        @click="selectCategory(category)"
      >
        <text class="iconfont" :class="category.icon" />
        <text class="name">
          {{ category.name }}
        </text>
      </view>
    </view>

    <!-- 常见问题 -->
    <view class="faq-list">
      <view class="section-title">
        常见问题
      </view>

      <view
        v-for="faq in filteredFaqs"
        :key="faq.id"
        class="faq-item"
        @click="toggleFaq(faq)"
      >
        <view class="question">
          <text class="text">
            {{ faq.question }}
          </text>
          <text class="iconfont" :class="faq.isExpanded ? 'icon-arrow-up' : 'icon-arrow-down'" />
        </view>
        <view v-if="faq.isExpanded" class="answer">
          <text class="text">
            {{ faq.answer }}
          </text>
        </view>
      </view>
    </view>

    <!-- 联系客服 -->
    <view class="contact-section">
      <view class="section-title">
        联系客服
      </view>

      <view class="contact-list">
        <view class="contact-item" @click="makePhoneCall">
          <text class="iconfont icon-phone" />
          <text class="label">
            客服电话
          </text>
          <text class="value">
            400-123-4567
          </text>
        </view>

        <view class="contact-item" @click="copyEmail">
          <text class="iconfont icon-email" />
          <text class="label">
            客服邮箱
          </text>
          <text class="value">
            support@example.com
          </text>
        </view>

        <view class="contact-item" @click="openWechat">
          <text class="iconfont icon-wechat" />
          <text class="label">
            微信客服
          </text>
          <text class="value">
            扫码添加
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 36rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;

  .iconfont {
    font-size: 32rpx;
    color: #999;
    margin-right: 20rpx;
  }

  .search-input {
    flex: 1;
    height: 72rpx;
    font-size: 28rpx;
    color: #333;
  }
}

.category-list {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .iconfont {
      font-size: 48rpx;
      color: #4caf50;
      margin-bottom: 10rpx;
    }

    .name {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.faq-list {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .faq-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .question {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
      }

      .iconfont {
        font-size: 32rpx;
        color: #999;
      }
    }

    .answer {
      margin-top: 20rpx;
      padding: 20rpx;
      background: #f8f8f8;
      border-radius: 8rpx;

      .text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

.contact-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .contact-list {
    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .iconfont {
        font-size: 40rpx;
        color: #4caf50;
        margin-right: 20rpx;
      }

      .label {
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
      }

      .value {
        flex: 1;
        font-size: 28rpx;
        color: #666;
        text-align: right;
      }
    }
  }
}
</style>
